<template>
  <div class="videoDiv">
    <v-loadmore :top-method="loadTop" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
    <div class="boxDiv" v-if="hotlist.length>0 && newList.length>0">
    <div class="hotComments">
      <h1 class="textC">熱門跟帖</h1>
      <div class="commentsList" v-for="(item,index) in hotlist" :key="index" :style="nameBoxStyle">
        <div class="commentTop">
          <img class="fl commentTx" :src="item[item.length - 1].imagePath?item[item.length - 1].imagePath:$defaultSetting.defaultPortrait" alt="">
          <div class="commentsName fl">
            <span class="color00a9e8 fontSize30">{{item[item.length - 1].nickname}}</span>
            <span class="colorbebfbf fontSize22">
              <font class="fl">{{item[item.length - 1].addr}}</font>
              <font class="fl">{{item[item.length - 1].device}}</font>
              <font class="fl">{{item[item.length - 1].createTime | dateServer}}</font>
            </span>
          </div>
          <div class="dianzanClass fr textR" @click="isLike(item[item.length - 1])">
              <span class="fontSize26">
                {{item[item.length - 1].praiseCount}}
              </span>
              <img v-if="item[item.length - 1].exiPraise == false" src="../../assets/img/02.png" alt="">
              <img v-else src="../../assets/img/01.png" alt="">
          </div>
        </div>
        <div class="commentsCent fontSize30">
          <div class="waiweiBox" v-if="item.length>1">
            <div class="commentsList erListbox" v-for="(erItem,erIndex) in item" :key="erIndex"  v-if="erIndex<item.length" :class="[erIndex == (item.length - 2) ? 'boderNone' : '',erIndex == (item.length - 1) ? 'displayNone' : '']">    <!-- boderNone -->
              <div class="commentTop">
                <span class="fl bianhao">{{erIndex + 1}}</span>
                <img class="fl" :src="erItem.imagePath?erItem.imagePath:$defaultSetting.defaultPortrait" alt="">
                <div class="commentsName fl">
                  <span class="color00a9e8 fontSize30">{{erItem.nickname}}</span>
                  <span class="colorbebfbf fontSize22">
                    <font class="fl">{{erItem.addr}}</font>
                    <font class="fl">{{erItem.device}}</font>
                    <font class="fl">{{erItem.createTime | dateServer}}</font>
                  </span>
                </div>
                <div class="dianzanClass fr textR" @click="isLike(erItem)">
                    <span class="fontSize26">
                      {{erItem.praiseCount}}
                    </span>
                    <img v-if="erItem.exiPraise == false" src="../../assets/img/02.png" alt="">
                    <img v-else src="../../assets/img/01.png" alt="">     
                </div>
              </div>
              <div class="commentsCent fontSize30">
                <div class="addBox" @click="addBox(erItem.onlyId)">
                  <span v-show="addId == erItem.onlyId">
                    <em @click.stop="reply(erItem.ids,erItem.comtUserId)">回復</em>
                    <em @click.stop="copy(erItem.comtContent)">復制</em>
                    <div></div>
                  </span>
                  <span class="comtContent">{{erItem.comtContent}}</span>
                </div>
              </div>
            </div>
            <!-- <div class="textC fontSize26 zhankai" v-if="item.length>6" @click="zhankai(item)">{{item.length > 7 ? '点击展开' : '点击收起'}}</div> -->
          </div>
          <div class="addBox" @click="addBox(item[item.length - 1].onlyId)">
            <span v-show="addId == item[item.length - 1].onlyId">
              <em @click.stop="reply(item[item.length - 1].ids,item[item.length - 1].comtUserId)">回復</em>
              <em @click.stop="copy(item[item.length - 1].comtContent)">復制</em>
              <div></div>
            </span>
            <span class="comtContent">{{item[item.length - 1].comtContent}}</span>
          </div>
        </div>
      </div>
      <div class="moreComments fontSize30 textC" @click="routerLink('hot')" v-if="listLength>5">更多跟帖</div>
    </div>
    <div class="hotComments">
      <h1 class="textC" @click="laqu()" >最新跟帖</h1>
      <div class="commentsList" v-for="(item,index) in newList" :key="index" :style="nameBoxStyle">
        <div class="commentTop">
          <img class="fl commentTx" :src="item[item.length - 1].imagePath" alt=""> 
          <div class="commentsName fl">
            <span class="color00a9e8 fontSize30">{{item[item.length - 1].nickname}}</span>
            <span class="colorbebfbf fontSize22">
              <font class="fl">{{item[item.length - 1].addr}}</font>
              <font class="fl">{{item[item.length - 1].device}}</font>
              <font class="fl">{{item[item.length - 1].createTime | dateServer}}</font>
            </span>
          </div>
          <div class="dianzanClass fr textR" @click="isLike(item[item.length - 1])">
              <span class="fontSize26">
                {{item[item.length - 1].praiseCount}}
              </span>
              <img v-if="item[item.length - 1].exiPraise == false" src="../../assets/img/02.png" alt="">
              <img v-else src="../../assets/img/01.png" alt="">
          </div>
        </div>
        <div class="commentsCent fontSize30">
          <div class="waiweiBox" v-if="item.length>1">
            <div class="commentsList erListbox" v-for="(erItem,erIndex) in item" :key="erIndex" v-if="erIndex<item.length" :class="[erIndex == (item.length - 2) ? 'boderNone' : '',erIndex == (item.length - 1) ? 'displayNone' : '']">    <!-- boderNone -->
              <div class="commentTop">
                <span class="fl bianhao">{{erIndex + 1}}</span>
                <img class="fl" :src="erItem.imagePath" alt="">
                <div class="commentsName fl">
                  <span class="color00a9e8 fontSize30">{{erItem.nickname}}</span>
                  <span class="colorbebfbf fontSize22">
                    <font class="fl">{{erItem.addr}}</font>
                    <font class="fl">{{erItem.device}}</font>
                    <font class="fl">{{erItem.createTime | dateServer}}</font>
                  </span>
                </div>
                <div class="dianzanClass fr textR" @click="isLike(erItem)">
                    <span class="fontSize26" >
                      {{erItem.praiseCount}}
                    </span>
                    <img v-if="erItem.exiPraise == false" src="../../assets/img/02.png" alt="">
                    <img v-else src="../../assets/img/01.png" alt="">     
                </div>
              </div>
              <div class="commentsCent fontSize30">
                <div class="addBox" @click="addBox(erItem.onlyId)">
                  <span v-show="addId == erItem.onlyId">
                    <em @click.stop="reply(erItem.ids,erItem.comtUserId)">回復</em>
                    <em @click.stop="copy(erItem.comtContent)">復制</em>
                    <div></div>
                  </span>
                 <span class="comtContent"> {{erItem.comtContent}}</span>
                </div>
              </div>
            </div>
            <!-- <div class="textC fontSize26 zhankai" v-if="item.length>7">{{item[0].length == 7 ? '点击展开' : '点击收起'}}</div> -->
          </div>
          <div class="addBox" @click="addBox(item[item.length - 1].onlyId)">
            <span v-show="addId == item[item.length - 1].onlyId">
              <em @click.stop="reply(item[item.length - 1].ids,item[item.length - 1].comtUserId)">回復</em>
              <em @click.stop="copy(item[item.length - 1].comtContent)">復制</em>
              <div></div>
            </span>
            <span class="comtContent">{{item[item.length - 1].comtContent}}</span>
          </div>
        </div>
      </div>
      <div class="moreComments fontSize30 textC" @click="routerLink('new')" v-if="listLength>5">更多跟帖</div>
    </div>
    <div class="hidderDiv" v-show="tmc" @click="tmc=false,addId=0"></div>
    </div> 
    <p class="textC fontSize30 marginTop04 isComments" v-else>暫無跟帖，速搶沙發</p>
    </v-loadmore>
  </div>
</template>
<script>
import apiComments from '../../api/comments'
import {Loadmore} from 'mint-ui'
export default {
  props:['childType','videoId','newsType'],
  data(){
    return{
      pageNum:1,
      hotlist:[],
      // newHotlist:[],
      tmc:false,
      addId: 0,
      newList:[],
      newsList:[],
      type:this.$route.params.type,
      id:this.$route.params.id,
      listLength:'',
      itemStyle:{
        display:'none'
      },
      bottomText: '上拉刷新',
      allLoaded: false,
      nameBoxStyle:{
        width:(document.body.clientWidth - 750/40*2) + 'px'
      },
      userId:this.$route.query.userId,
      tab:this.$route.query.tab
    }
  },
  components:{
    'v-loadmore':Loadmore
  },
  watch:{
    touristsId(newVal,oldVal){
      if(newVal){
        this.focus(this.publicUserId)
      }
    }
  },
  mounted(){
    window.addEventListener('scroll',()=>{
    })
  },
  created(){
    this.isList()
    window.isList = this.isList
    window.appLoginId = this.appLoginId
  },
  methods:{
    // 接受以游客身份登陆的userId
    // tourists(touristsId){
    //   if(this.$isAndroid){
    //     this.touristsId = touristsId
    //     window.android.isTourists(touristsId)
    //   }else if(this.$isiOS){
    //     this.touristsId = touristsId
    //     window.webkit.messageHandlers.isTourists.postMessage(touristsId)
    //   }
    // },
    //  接受正常登陆之后的userId
    appLoginId(userId){
      this.userId = userId
      this.tab = ''
    },
    //  顶部刷新
    loadTop(){
      this.isList()
      this.$refs.loadmore.onTopLoaded()
    },
    // 判断加载列表
    isList(){
      this.hotlist = []
      this.newList = []
      if(this.$route.params.type == '2' || this.childType == 2){
        this.findVideoHotFloorCom()
        this.findVideoFloorCom()
      }else{
        this.findPraiseNewsCom()
        this.findNewsCom()
      }
    },
    // 点赞判断
    isLike(item){
      if(this.$route.params.type == '2' || this.childType == 2){
        this.comPraise(item)
      }else{
        this.comPraiseNum(item)
      }
    },
    // 资讯评论
    // 热门评论列表
    findPraiseNewsCom () {
        let self = this
        let params = {newsType:this.$route.params.type,newsId:this.id,pageNum:this.pageNum,pageSize:5,userId:this.userId}
        apiComments.findPraiseNewsCom(params).then(data => {
          this.listLength = data.body.data.total
          if(data.body.data.list){
            let ids = []
            for(let i = 0;i<data.body.data.list.length;i++){
              if(data.body.data.list[i] != ''){
                ids = []
                for(let j = 0; j<data.body.data.list[i].length;j++){
                  data.body.data.list[i][j].lengths = 6
                  data.body.data.list[i][j].isLike = false
                  data.body.data.list[i][j].onlyId = 'hot' + i.toString() + j.toString() + this.pageNum.toString()
                  ids.push(data.body.data.list[i][j].id)
                  data.body.data.list[i][j].ids = ids.toString()
                }
                data.body.data.list[i].arrlength = 7
                this.hotlist.push(data.body.data.list[i])   
              }
            }
          }else{
            this.hotlist = true
          }
        })
    },
    // 最新评论列表（根据时间）
      findNewsCom () {
        let params = {newsType:this.$route.params.type,newsId:this.id,pageNum:this.pageNum,pageSize:5,userId:this.userId}
        apiComments.findNewsCom(params).then(data => {
          this.listLength = data.body.data.total
          if(data.body.data.list){
            let ids = []
            for(let i = 0;i<data.body.data.list.length;i++){
              if(data.body.data.list[i] != ''){
                ids = []
                for(let j = 0; j<data.body.data.list[i].length;j++){
                  data.body.data.list[i][j].lengths = 6
                  data.body.data.list[i][j].isLike = false
                  data.body.data.list[i][j].onlyId = 'new' + i.toString() + j.toString() + this.pageNum.toString()
                  ids.push(data.body.data.list[i][j].id)
                  data.body.data.list[i][j].ids = ids.toString()
                }
                data.body.data.list[i].arrlength = 3
                this.newList.push(data.body.data.list[i])   
              } 
            }
          }
        })
      },
    // 点赞
    comPraiseNum(item){
          let parms = {newsType:this.$route.params.type,newsId:item.newsId,commentId:item.id,userId:this.userId}
          let self = this
          apiComments.comPraiseNum(parms).then(data => {
            if(data.body.returnCode == "ERR_0000"){
              for(let i = 0; i<this.hotlist.length;i++){
                for(let j = 0; j<this.hotlist[i].length;j++){
                  if(item.id == this.hotlist[i][j].id){
                    this.hotlist[i][j].exiPraise = true
                    this.hotlist[i][j].praiseCount++
                  }
                }
              }
              for(let i = 0; i<this.newList.length;i++){
                for(let j = 0; j<this.newList[i].length;j++){
                  if(item.id == this.newList[i][j].id){
                    this.newList[i][j].exiPraise = true
                    this.newList[i][j].praiseCount++
                  }
                } 
              }
            }
          })
      },
    // 弹出回复的框
    addBox(id){
      this.addId = id
      this.tmc = !this.tmc
    },
    // 回复
    reply(ids,comtUserId){
      if(this.tab == 4){
        alert('aaaaa')
        if(this.$isAndroid){
          window.android.isUserPermissions()
        }else if(this.$isiOS){
          window.webkit.messageHandlers.isUserPermissions.postMessage('')
        }
      }else{
        this.tmc = false
        this.addId = 0
        if(comtUserId == this.userId){
          if(this.$isAndroid){
            window.android.showToast()
          }else if(this.$isiOS){
            window.webkit.messageHandlers.showToast.postMessage('')
          } 
        }else{
          if(this.$isAndroid){
            window.android.getReplyID(ids,comtUserId)
          }else if(this.$isiOS){
            let getReply = ids + ',' + comtUserId
            window.webkit.messageHandlers.getReplyID.postMessage(getReply)
          }
        }
      }
    },
    // 复制
    copy(content){
      this.tmc = false
      this.addId = 0
      if(this.$isAndroid){
        window.android.copyComments(content)
      }else if(this.$isiOS){
        window.webkit.messageHandlers.copyComments.postMessage(content)
      }
    },
    // 热门视频评论
    findVideoHotFloorCom () {
        let self = this
        let params = {videoId:(this.id ? this.id : this.videoId),pageNum:this.pageNum,pageSize:5,userId:this.userId,newsType:(this.newsType ? this.newsType : this.$route.params.type)}
        apiComments.findVideoHotFloorCom(params).then(data => {
          self.nowDate = data.body.data.date
          if(data.body.data.list){
            let ids = []
            for(let i = 0;i<data.body.data.list.length;i++){
              if(data.body.data.list[i] != ''){
                ids = []
                for(let j = 0; j<data.body.data.list[i].length;j++){
                  data.body.data.list[i][j].length = data.body.data.list[i].length
                  data.body.data.list[i][j].onlyId = 'hot' +  i.toString() + j.toString() + this.pageNum.toString()
                  ids.push(data.body.data.list[i][j].id)
                  data.body.data.list[i][j].ids = ids.toString()
                }
                this.hotlist.push(data.body.data.list[i])
              }
            }
          }
        })
      },
      // 最新视频评论
      findVideoFloorCom(){
        let params = {videoId:(this.id ? this.id : this.videoId),pageNum:this.pageNum,pageSize:5,userId:this.userId,newsType:(this.newsType ? this.newsType : this.$route.params.type)}
        apiComments.findVideoFloorCom(params).then(data => {
          this.listLength = data.body.data.total
          if(data.body.data.list){
            let ids = []
            for(let i = 0;i<data.body.data.list.length;i++){
              if(data.body.data.list[i] != ''){
                ids = []
                for(let j = 0; j<data.body.data.list[i].length;j++){
                  data.body.data.list[i][j].length = data.body.data.list[i].length
                  data.body.data.list[i][j].onlyId = 'new' +  i.toString() + j.toString() + this.pageNum.toString()
                  ids.push(data.body.data.list[i][j].id)
                  data.body.data.list[i][j].ids = ids.toString()
                }
                this.newList.push(data.body.data.list[i])  
              }
            }
          }
        })
      },
      // 视频点赞
      comPraise(item){
        let parms = {videoId:(this.id ? this.id : this.videoId),commentId:item.id,userId:this.userId,newsType:(this.newsType ? this.newsType : this.$route.params.type)}
          apiComments.comPraise(parms).then(data => {
          if(data.body.returnCode == "ERR_0000"){
            for(let i = 0; i<this.hotlist.length;i++){
                for(let j = 0; j<this.hotlist[i].length;j++){
                  if(item.id == this.hotlist[i][j].id){
                    this.hotlist[i][j].exiPraise = true
                    this.hotlist[i][j].praiseCount++
                  }
                }
              }
              for(let i = 0; i<this.newList.length;i++){
                for(let j = 0; j<this.newList[i].length;j++){
                  if(item.id == this.newList[i][j].id){
                    this.newList[i][j].exiPraise = true
                    this.newList[i][j].praiseCount++
                  }
                } 
              }
            }
          })
      },
    // 页面跳转
    routerLink(commentType){
        this.$router.push({ 
            name: 'commentsDetail',
            params: { 
              commentType: commentType,
              type:(this.type ? this.type :this.childType),
              id:(this.id ? this.id : this.videoId)
              },
            query:{
              userId:this.userId,
              tab:this.tab
            }
          })
      }
  }
}
</script>

<style src='../../assets/css/comments.css'></style>
